<template>
    <div class="app-container">
        <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch"
            label-width="68px">
            <el-form-item label="菜单名称" prop="name">
                <el-input v-model="queryParams.name" placeholder="请输入菜单名称" clearable
                    @keyup.enter.native="handleQuery" />
            </el-form-item>
            <el-form-item>
                <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
                <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
            </el-form-item>
        </el-form>

        <el-row :gutter="10" class="mb8">
            <el-col :span="1.5">
                <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd"
                    v-hasPermi="['system:xcxmenu:add']">新增</el-button>
            </el-col>
            <el-col :span="1.5">
                <el-button type="success" plain icon="el-icon-edit" size="mini" :disabled="single" @click="handleUpdate"
                    v-hasPermi="['system:xcxmenu:edit']">修改</el-button>
            </el-col>
            <el-col :span="1.5">
                <el-button type="danger" plain icon="el-icon-delete" size="mini" :disabled="multiple"
                    @click="handleDelete" v-hasPermi="['system:xcxmenu:remove']">删除</el-button>
            </el-col>
            <el-col :span="1.5">
                <el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExport"
                    v-hasPermi="['system:xcxmenu:export']">导出</el-button>
            </el-col>
            <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
        </el-row>
        <!-- @selection-change="handleSelectionChange" -->
        <el-table v-loading="loading" :data="xcxmenuList" row-key="xcxMenuId"
            :tree-props="{ children: 'children', hasChildren: 'hasChildren' }" :default-expand-all="false">
            <!-- <el-table-column type="selection" width="55" align="center" /> -->
            <el-table-column label="菜单编号" align="center" prop="xcxMenuId" :show-overflow-tooltip="true" />
            <el-table-column label="菜单名称" align="center" prop="name" :show-overflow-tooltip="true" />
            <el-table-column label="父菜单ID" align="center" prop="xcxMenuTopid" />
            <el-table-column label="菜单类型" align="center" prop="menuType">
                <template slot-scope="scope">
                    <el-tag v-if="scope.row.menuType == 'M'">其他DOM</el-tag>
                    <el-tag v-if="scope.row.menuType == 'C'">菜单</el-tag>
                    <el-tag v-if="scope.row.menuType == 'F'">按钮</el-tag>
                </template>
            </el-table-column>
            <el-table-column label="菜单标识" align="center" prop="menuId" :show-overflow-tooltip="true" />
            <el-table-column label="权限标识" align="center" prop="authId" />
            <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
                <template slot-scope="scope">
                    <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)"
                        v-hasPermi="['system:xcxmenu:edit']">修改</el-button>
                    <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)"
                        v-hasPermi="['system:xcxmenu:remove']">删除</el-button>
                </template>
            </el-table-column>
        </el-table>

        <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum"
            :limit.sync="queryParams.pageSize" @pagination="getList" />

        <!-- 添加或修改小程序菜单对话框 -->
        <el-dialog :title="title" :visible.sync="open" width="600px" append-to-body>
            <el-form ref="form" :model="form" :rules="rules" label-width="80px">


                <el-row :span="24">
                    <el-col :span="12">
                        <el-form-item label="父菜单ID" prop="xcxMenuTopid">
                            <!-- <el-tree :data="xcxmenuList" :props="defaultProps" @node-click="handleNodeClick"></el-tree> -->
                            <!-- <el-input v-model="form.xcxMenuTopid" placeholder="请输入父菜单ID" /> -->
                            <treeselect v-model="form.xcxMenuTopid" :options="xcxmenuList" :normalizer="normalizer"
                                :show-count="true" placeholder="选择上级菜单" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="菜单名称" prop="name">
                            <el-input v-model="form.name" placeholder="请输入菜单名称" />
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-row :span="24">
                    <el-col :span="12">
                        <el-form-item label="菜单标识" prop="menuId">
                            <el-input v-model="form.menuId" placeholder="请输入菜单标识" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="权限标识" prop="authId">
                            <el-input v-model="form.authId" placeholder="请输入权限标识" />
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-form-item label="菜单类型" prop="menuType">
                    <el-radio-group v-model="form.menuType">
                        <el-radio label="M">其他DOM</el-radio>
                        <el-radio label="C">菜单</el-radio>
                        <el-radio label="F">按钮</el-radio>
                    </el-radio-group>
                </el-form-item>

                <el-form-item label="是否外链" prop="isFrame" v-if="form.menuType == 'M'">
                    <el-radio-group v-model="form.isFrame">
                        <el-radio label="1">是</el-radio>
                        <el-radio label="0">否</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="外链地址" prop="componentUrl" v-if="form.menuType == 'M' && form.isFrame == '1'">
                    <el-input v-model="form.componentUrl" placeholder="请输入外链地址" />
                </el-form-item>
                <el-form-item label="组件路径" prop="path" v-if="form.menuType != 'C'">
                    <el-input v-model="form.path" placeholder="请输入组件路径" />
                </el-form-item>
                <el-form-item label="组件参数" prop="query" v-if="form.menuType != 'C'">
                    <el-input v-model="form.query" placeholder="请输入组件参数" />
                </el-form-item>
                <el-form-item label="顺序" prop="orderNumber">
                    <el-input-number controls-position="right" :min="0" v-model="form.orderNumber"
                        placeholder="请输入显示顺序" />
                </el-form-item>
                <el-form-item label="是否冻结" prop="freezeS">
                    <el-radio-group v-model="form.freezeS">
                        <el-radio label="1">是</el-radio>
                        <el-radio label="0">否</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="备注" prop="remark">
                    <el-input v-model="form.remark" placeholder="请输入备注" />
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="submitForm">确 定</el-button>
                <el-button @click="cancel">取 消</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
import { listXcxmenu, getXcxmenu, delXcxmenu, addXcxmenu, updateXcxmenu } from "@/api/xcx_system/xcx_menu";

export default {
    components: { Treeselect },
    name: "Xcxmenu",
    data() {
        return {
            // 遮罩层
            loading: true,
            // 选中数组
            ids: [],
            // 非单个禁用
            single: true,
            // 非多个禁用
            multiple: true,
            // 显示搜索条件
            showSearch: true,
            // 总条数
            total: 0,
            // 小程序菜单表格数据
            xcxmenuList: [],
            // 弹出层标题
            title: "",
            // 是否显示弹出层
            open: false,
            // 查询参数
            queryParams: {
                pageNum: 1,
                pageSize: 10,
                name: null,
                xcxMenuTopid: null,
                orderNumber: null,
                menuType: null,
                path: null,
                query: null,
                menuId: null,
                authId: null,
                isFrame: null,
                componentUrl: null,
                freezeS: null,
                deleteS: null,
                createData: null,
            },
            // 表单参数
            form: {},
            // 表单校验
            rules: {
                menuId: [
                    { required: true, message: "菜单标识不能为空", trigger: "blur" }
                ],
                name: [
                    { required: true, message: "菜单名称不能为空", trigger: "blur" }
                ],

            },
           //下拉菜单
        //    opdatas:[],
        };
    },
    created() {
        this.getList();
    },
    methods: {
        handleNodeClick(data) {
            console.log(data);
        },
        /** 转换菜单数据结构 */
        normalizer(node) {
            if (node.children && !node.children.length) {
                delete node.children;
            }
            return {
                id: node.xcxMenuId,
                topid: node.xcxMenuTopid,
                label: node.name,
                children: node.children
            };
        },
        /** 查询小程序菜单列表 */
        getList() {
            this.loading = true;
            listXcxmenu(this.queryParams).then(response => {
                // console.log("response.rows", response.rows)
                this.xcxmenuList = this.handleTree(response.rows, "xcxMenuId", "xcxMenuTopid");
                // console.log("this.xcxmenuList", this.xcxmenuList);
                // const menu = { menuId: 0, menuName: '主类目', children: [] };
                // menu.children = this.xcxmenuList;
                // this.opdatas=menu;
                this.total = response.total;
                this.loading = false;
            });
        },
        // 取消按钮
        cancel() {
            this.open = false;
            this.reset();
        },
        // 表单重置
        reset() {
            this.form = {
                xcxMenuId: null,
                name: null,
                xcxMenuTopid: null,
                orderNumber: null,
                menuType: "M",
                path: null,
                query: null,
                menuId: null,
                authId: null,
                isFrame: "0",
                componentUrl: null,
                freezeS: "0",
                delete: null,
                createData: null,
                remark: null
            };
            this.resetForm("form");
        },
        /** 搜索按钮操作 */
        handleQuery() {
            this.queryParams.pageNum = 1;
            this.getList();
        },
        /** 重置按钮操作 */
        resetQuery() {
            this.resetForm("queryForm");
            this.handleQuery();
        },
        // 多选框选中数据
        handleSelectionChange(selection) {
            this.ids = selection.map(item => item.xcxMenuId)
            this.single = selection.length !== 1
            this.multiple = !selection.length
        },
        /** 新增按钮操作 */
        handleAdd() {
            this.reset();
            this.open = true;
            this.title = "添加小程序菜单";
        },
        /** 修改按钮操作 */
        handleUpdate(row) {
            this.reset();
            const xcxMenuId = row.xcxMenuId || this.ids
            getXcxmenu(xcxMenuId).then(response => {
                this.form = response.data;
                this.open = true;
                this.title = "修改小程序菜单";
            });
        },
        /** 提交按钮 */
        submitForm() {
            this.$refs["form"].validate(valid => {
                if (valid) {
                    if (this.form.xcxMenuId != null) {
                        updateXcxmenu(this.form).then(response => {
                            this.$modal.msgSuccess("修改成功");
                            this.open = false;
                            this.getList();
                        });
                    } else {
                        addXcxmenu(this.form).then(response => {
                            this.$modal.msgSuccess("新增成功");
                            this.open = false;
                            this.getList();
                        });
                    }
                }
            });
        },
        /** 删除按钮操作 */
        handleDelete(row) {
            const xcxMenuIds = row.xcxMenuId || this.ids;
            this.$modal.confirm('是否确认删除小程序菜单编号为"' + xcxMenuIds + '"的数据项？').then(function () {
                return delXcxmenu(xcxMenuIds);
            }).then(() => {
                this.getList();
                this.$modal.msgSuccess("删除成功");
            }).catch(() => { });
        },
        /** 导出按钮操作 */
        handleExport() {
            this.download('system/xcxmenu/export', {
                ...this.queryParams
            }, `xcxmenu_${new Date().getTime()}.xlsx`)
        }
    }
};
</script>
